<!-- 首页卡片信息快 组件 -->
<template>
  <div id="userResponeCard">
    <!-- 卡片总区域 -->
    <div class="card_box">
      <!-- 卡片标题区域 -->
      <div class="card_title_box">
        <router-link :to="'/articlePage/'+cardList.id" class="card_title">{{ cardList.title }}</router-link>
      </div>
      <!-- 卡片中间内容区域 文章收缩的 -->
      <div class="card_body_box_close" v-if="!isOpen">
        <!-- 中间左边图片区域 -->
        <!-- 中间右边文章内容部分显示区域 -->
        <div class="card_body_right_box" :style="!cardList.isImage ? changeCardRightBoxStyle:none">
          <p class="card_content_text" @click="isOpen=!isOpen">{{ cardList.content }}</p>
          <div class="btn_open" @click="isOpen=!isOpen">阅读全文 ↓</div>
        </div>
      </div>
      <!-- 卡片中间内容区域 文章全部显示的 -->
      <div class="card_body_box_open" v-if="isOpen">
        {{ cardList.content }}
      </div>
      <!-- 卡片下边用户操作区域 -->
      <div class="card_function_box">
        <!-- 点赞按钮 -->
        <div class="btn_voteGood" @click="doChangeGood" :style="isGood?changeVoteStyle:none">
          <span v-if="!isGood">赞同</span>
          <span v-if="isGood">已赞同</span>
          {{ cardList.good_num }}
        </div>
        <!--&lt;!&ndash; 不赞同按钮 &ndash;&gt;-->
        <!--<div class="btn_voteBad" @click="doChangeBad" :style="cardList.isBad?changeVoteStyle:none">-->
        <!--<span v-if="!cardList.isBad">踩</span>-->
        <!--<span v-if="cardList.isBad">已踩 </span>-->
        <!--{{ cardList.badNum }}-->
        <!--</div>-->
        <!-- 评论按钮 -->
        <div class="btn_comment" @click="isCommentOpen=!isCommentOpen">
          <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/comment_btn.png" class="btn_comment_img"></div>
          <span style="float: left" v-if="!isCommentOpen">{{ commentList.length}} 条评论</span>
          <span style="float: left" v-if="isCommentOpen">收起评论</span>
        </div>
        <!-- 评论按钮 -->
        <!-- 分析按钮 -->
        <div class="btn_analysis"><span>分享</span></div>
        <!-- 收藏按钮 -->
        <div class="btn_collection"><span>收藏</span></div>
        <!-- 收缩文章按钮 -->
        <div class="btn_close" v-if="isOpen" @click="isOpen=!isOpen">收起 ↑</div>
      </div>
      <div class="comment_box" v-if="isCommentOpen">
        <!-- 评论区域头 -->
        <div class="comment_head_box">
          <span class="comment_head_span">{{ commentList.length }} 条评论</span>
        </div>
        <!-- 评论组件内容区域 -->
        <CommentCard v-for="(i, index) of commentList" :key="index" :list="i"></CommentCard>
        <!-- 没有评论输入数据区域 -->
        <CommentInputCard v-if="commentList.length==0&&isCommentOpen" @getNewData="getCommentData" :aid="cardList.id"></CommentInputCard>
      </div>

    </div>
  </div>
</template>

<script>
  import CommentCard from '../../../components/CommentCard'
  import CommentInputCard from '../../../components/CommentInputCard'
  export default {
    name: 'userResponeCard',
    components: {
      'CommentCard': CommentCard,
      'CommentInputCard': CommentInputCard
    },
    data () {
      return {
        isGood: false,
        isBad: false,
        isOpen: false,
        commentList: [],
        isCommentOpen: false,
        changeCardRightBoxStyle: [{'width': '100%'}, {'padding': '0px'}],
        changeVoteStyle: [{'background-color': '#0084ff'}, {'color': 'white'}]
      }
    },
    props: ['cardList'],
    computed: {
    },
    created () {
      this.getCommentData()
    },
    methods: {
      getCommentData () {
        this.isCommentOpen = false
        this.axios.get('/api/getComment', {
          params: {
            id: this.cardList.id,
            state: 0
          }
        })
          .then((response) => {
            this.commentList = response.data.data
            console.log(response)
          })
          .catch((error) => {
            this.$Notice.error({
              title: '通知',
              desc: '接口，异常！'
            })
            console.info(error)
          })
      },
      doChangeGood () {
        if (this.isGood) {
          this.cardList.good_num--
        } else {
          this.cardList.good_num++
        }
        this.isGood = !this.isGood
        if (this.isBad) {
          this.cardList.bad_num--
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../../../../../static/css/user/UserRespone.css';
</style>
